<template>
	<view class="input">
		<input :value="modelValue"  @input="handleInput" :maxlength="maxlength" :placeholder="placeholder" :type="types">
		<view class="eyes" v-if="isShowPass" @tap="toggleEyes">
			<uni-icons type="eye" v-if="isText" ></uni-icons>
			<uni-icons type="eye-slash" v-else ></uni-icons>
		</view>
		<view class="box" v-if="isShowCode">
			<view class="code" @tap="getVerCode" v-if="time == 60">
				获取验证码
			</view>	
			<view class="time" v-else>
				{{ time }}
			</view>
		</view>
			
	</view>
</template>

<script setup>
	import { computed, ref } from "vue";
	// defineProps(["maxlength","modelValue","placeholder","type","isShowCode"])
	// 文本密码切换
	const isText = ref(false);
	function toggleEyes(){
		isText.value = !isText.value;
		// props.type = "text"
		
	}
	
	const props = defineProps({
		// 输入框文字最大长度
		maxlength:{
			type:[String,Number],
			default:11
		},
		// 是否显示密码与文本切换图标
		isShowPass:{
			type:Boolean,
			default:false
		},
		//  接收的v-model数据
		modelValue:{
			type:String,
			required:true
		},
		// placeholder
		placeholder:{
			type:[String,Number],
			default:"请输入内容"
		},
		// 输入框类型  
		type:{
			type:String,
			default:"text"
		},
		// 是否显示获取验证码
		isShowCode:{
			type:Boolean,
			default:false
		},
		// 倒计时时间
		time:{
			type:[String,Number],
			default:60
		}
	})
	const types = computed(()=>{
		return isText.value ? "text" : props.type
	})
	// defineEmits 是语法糖 必须先声明 再使用  否则会报defineEmits is undefined
	const emit = defineEmits()
	function getVerCode(){
		console.log(222)
		// 自定义事件
		 emit("setCode")
	}
	function handleInput(e){
		emit("update:modelValue",e.detail.value)
	}
	
</script>

<style lang="scss" scoped>
.input{
			margin: 12px 0;
			padding: 16px;
			display: flex;
			align-items: center;
			color: #333333;
			border-radius: 2.5rem;
			background: #f1ece7;
			position: relative;
			font-size: 14px;
			box-shadow: 0 0 1.875rem 0 rgb(43 86 112 / 10%);
			input{
				flex: 1;
				
			}
			.eyes{
				position: absolute;
				z-index: 999;
				top: 0;
				bottom: 0;
				right: 0;
				padding: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.code,.time{
				position: absolute;
				right: 16px;
				top: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				color: #80829b;
				z-index: 999;
			}
			// padding: 16px;
		}
</style>